<template>
  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
    <el-row>
<!--      <el-col :span="12" v-if="false">-->
<!--        <el-form-item prop="tplCategory">-->
<!--          <span slot="label">生成模板</span>-->
<!--          <el-select v-model="info.tplCategory" @change="tplSelectChange">-->
<!--            <el-option label="单表（增删改查）" value="crud" />-->
<!--            <el-option label="树表（增删改查）" value="tree" />-->
<!--            <el-option label="主子表（增删改查）" value="sub" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-col :span="12">-->
<!--        <el-form-item prop="tplWebType">-->
<!--          <span slot="label">前端类型</span>-->
<!--          <el-select v-model="info.tplWebType">-->
<!--            <el-option label="Vue2 Element UI 模版" value="element-ui" />-->
<!--            <el-option label="Vue3 Element Plus 模版" value="element-plus" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
      <el-col :span="12">
        <el-form-item prop="functionName">
          <span slot="label">
            生成功能名
            <el-tooltip content="用作类描述，例如 用户" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.functionName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="packageName">
          <span slot="label">
            生成包路径
            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.packageName" />
        </el-form-item>
      </el-col>

      <el-col :span="24">
        <el-form-item prop="genType">
          <span slot="label">
            接口服务方式
            <el-tooltip content="默认为优树搭java图形程序,无需重启;也可以在项目路径生成java代码或zip压缩包下载(若依模式)" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-radio v-model="info.genType" label="2">优树搭</el-radio>
          <el-radio v-model="info.genType" label="1">项目路径生成代码</el-radio>
          <el-radio v-model="info.genType" label="0">zip压缩包源码下载</el-radio>
        </el-form-item>
      </el-col>

      <el-col :span="12" v-if="info.genType!='2'">
        <el-form-item prop="moduleName">
          <span slot="label">
            生成模块名
            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.moduleName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            上级菜单
            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <treeselect
            :append-to-body="true"
            v-model="info.parentMenuId"
            :options="menus"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="请选择系统菜单"
          />
        </el-form-item>
      </el-col>

    </el-row>


      <el-row v-if="info.genType=='2'">
        <el-col :span="12">
          <el-form-item prop="ysdListApi">
          <span slot="label">
            列表API编码
            <el-tooltip content="通过优树搭获取列表数据的API编码" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
            <el-input v-model="info.ysdListApi" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="ysdDetailApi">
          <span slot="label">
            详情API编码
            <el-tooltip content="通过优树搭获取数据详情的API编码" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
            <el-input v-model="info.ysdDetailApi" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="ysdAddApi">
          <span slot="label">
            新增API编码
            <el-tooltip content="通过优树搭新增数据的API编码" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
            <el-input v-model="info.ysdAddApi" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="ysdUpdateApi">
          <span slot="label">
            修改API编码
            <el-tooltip content="通过优树搭修改数据的API编码" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
            <el-input v-model="info.ysdUpdateApi" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="ysdDeleteApi">
          <span slot="label">
            删除API编码
            <el-tooltip content="通过优树搭删除数据的API编码" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
            <el-input v-model="info.ysdDeleteApi" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="ysdImportApi">
          <span slot="label">
            导入API编码
            <el-tooltip content="通过优树搭导入数据的API编码" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
            <el-input v-model="info.ysdImportApi" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="ysdExportApi">
          <span slot="label">
            导出API编码
            <el-tooltip content="通过优树搭导出数据的API编码" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
            <el-input v-model="info.ysdExportApi" />
          </el-form-item>
        </el-col>
      </el-row>

<!--      <el-col :span="24" v-if="info.genType == '1'">-->
<!--        <el-form-item prop="genPath">-->
<!--          <span slot="label">-->
<!--            自定义路径-->
<!--            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">-->
<!--              <i class="el-icon-question"></i>-->
<!--            </el-tooltip>-->
<!--          </span>-->
<!--          <el-input v-model="info.genPath">-->
<!--            <el-dropdown slot="append">-->
<!--              <el-button type="primary">-->
<!--                最近路径快速选择-->
<!--                <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--              </el-button>-->
<!--              <el-dropdown-menu slot="dropdown">-->
<!--                <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </el-dropdown>-->
<!--          </el-input>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <el-row v-show="info.tplCategory == 'tree'">
      <h4 class="form-header">其他信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树编码字段
            <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树父编码字段
            <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeParentCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            树名称字段
            <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.treeName" placeholder="请选择">
            <el-option
              v-for="(column, index) in info.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="info.tplCategory == 'sub'">
      <h4 class="form-header">关联信息</h4>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            关联子表的表名
            <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
            <el-option
              v-for="(table, index) in tables"
              :key="index"
              :label="table.tableName + '：' + table.tableComment"
              :value="table.tableName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            子表关联的外键名
            <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-select v-model="info.subTableFkName" placeholder="请选择">
            <el-option
              v-for="(column, index) in subColumns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Treeselect },
  props: {
    info: {
      type: Object,
      default: null
    },
    tables: {
      type: Array,
      default: null
    },
    menus: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      subColumns: [],
      rules: {
        tplCategory: [
          { required: true, message: "请选择生成模板", trigger: "blur" }
        ],
        packageName: [
          { required: true, message: "请输入生成包路径", trigger: "blur" }
        ],
        // businessName: [
        //   { required: true, message: "请输入生成业务名", trigger: "blur" }
        // ],
        functionName: [
          { required: true, message: "请输入生成功能名", trigger: "blur" }
        ],
        ysdListApi: [
          { required: true, message: "请输入优树搭获取列表数据的API编码", trigger: "blur" }
        ],
        ysdDetailApi: [
          { required: true, message: "请输入优树搭获取数据详情的API编码", trigger: "blur" }
        ],
        ysdAddApi: [
          { required: true, message: "请输入优树搭新增数据的API编码", trigger: "blur" }
        ],
        ysdUpdateApi: [
          { required: true, message: "请输入优树搭修改数据的API编码", trigger: "blur" }
        ],
        ysdDeleteApi: [
          { required: true, message: "请输入优树搭删除数据的API编码", trigger: "blur" }
        ],
        ysdImportApi: [
          { required: true, message: "请输入优树搭导入数据的API编码", trigger: "blur" }
        ],
        ysdExportApi: [
          { required: true, message: "请输入优树搭导出数据的API编码", trigger: "blur" }
        ],
      }
    };
  },
  watch: {
    'info.subTableName': function(val) {
      this.setSubTableColumns(val);
    },
    'info.tplWebType': function(val) {
      if (val === '') {
        this.info.tplWebType = "element-ui";
      }
    }
  },
  methods: {
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children
      };
    },
    /** 选择子表名触发 */
    subSelectChange(value) {
      this.info.subTableFkName = '';
    },
    /** 选择生成模板触发 */
    tplSelectChange(value) {
      if(value !== 'sub') {
        this.info.subTableName = '';
        this.info.subTableFkName = '';
      }
    },
    /** 设置关联外键 */
    setSubTableColumns(value) {
      for (var item in this.tables) {
        const name = this.tables[item].tableName;
        if (value === name) {
          this.subColumns = this.tables[item].columns;
          break;
        }
      }
    }
  }
};
</script>
